<template>
    <div style="width: 100%; height: 100%;">
        <div>
            <div class="align-stretch tree-panel">
                <org-tree :dept-list.sync="deptList" style="height: 100%;" @node-click="handleNodeClick" />
            </div>
            <div class=" app-container" style="margin-left: 270px;">
                <div class="pageTitle">
                    <div class="pageBtn" style="padding-left: 0;">
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
                    </div>
                </div>

                <page-main style="margin: 10px 10px 0 0;">
                    <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                              header-cell-class-name="table-header" style="width: 100%;" border :row-class-name="tableRowClassName">
                        <el-table-column label="卡口名称" width="200" prop="crossing_name" />
                        <el-table-column label="卡口编号" width="150" prop="crossing_index" />
                        <el-table-column label="车道数" width="100" prop="driveway_num" align="right" />
                        <el-table-column label="内部编号" width="100" prop="inside_index" align="right" />
                        <el-table-column label="组织机构名称" prop="name" align="center" />
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" style="margin-right: 10px;" @click="handleUpdate(scope.row)">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </page-main>
            </div>
        </div>

        <el-dialog :title="currentCrossing.isNew?'添加卡口':'修改卡口信息'" :visible.sync="detailVisible" width="800px" append-to-body="">
            <el-form ref="form" :model="currentCrossing" :rules="rules" label-width="130px" size="small">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="所属组织机构" prop="control_unit_id">
                            <treeselect v-model="currentCrossing.control_unit_id" :clearable="false" :normalizer="normalizer" :options="deptList" placeholder="选择上级部门" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路口编号" prop="crossing_index">
                            <el-input v-model="currentCrossing.crossing_index" placeholder="请输入路口编号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路口名称" prop="crossing_name">
                            <el-input v-model="currentCrossing.crossing_name" placeholder="请输入路口名称" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="触发类型" prop="cross_type">
                            <remote-dict-select v-model="currentCrossing.cross_type" :clearable="false" dict="cross_type" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="卡口类型" prop="crossing_type">
                            <remote-dict-select v-model="currentCrossing.crossing_type" :clearable="false" dict="crossing_type" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="前端类型" prop="front_type">
                            <remote-dict-select v-model="currentCrossing.front_type" :clearable="false" dict="front_type" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="道路功能等级" prop="road_type">
                            <remote-dict-select v-model="currentCrossing.road_type" :clearable="false" dict="road_type" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="小型车限速" prop="speed_limit">
                            <el-input-number v-model="currentCrossing.speed_limit" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="大型车限速" prop="logo_speed_limit">
                            <el-input-number v-model="currentCrossing.logo_speed_limit" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="经度" prop="latitude">
                            <el-input v-model="currentCrossing.latitude" style="width: 130px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纬度" prop="longitude">
                            <el-input v-model="currentCrossing.longitude" style="width: 130px;" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="内部编号" prop="inside_index">
                            <el-input-number v-model="currentCrossing.inside_index" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="方向数" prop="direction_num">
                            <el-input-number v-model="currentCrossing.direction_num" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车道数" prop="driveway_num">
                            <div class="flex">
                                <el-input-number v-model="currentCrossing.driveway_num" style="margin-right: 10px;" />
                                <el-button v-if="currentCrossing.crossing_id" size="mini" type="primary" @click="openLaneDialog">车道配置</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <!--                    <el-col :span="12">-->
                    <!--                        <el-form-item label="终端数" prop="terminals_number">-->
                    <!--                            <el-input-number v-model="currentCrossing.terminals_number" />-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                    <el-col :span="12">
                        <el-form-item label="流量阈值(繁忙)" prop="flow_threshold">
                            <el-input-number v-model="currentCrossing.flow_threshold" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="流量阈值(拥堵)" prop="flow_threshold1">
                            <el-input-number v-model="currentCrossing.flow_threshold1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序号" prop="sequence_idx">
                            <el-input-number v-model="currentCrossing.sequence_idx" />
                        </el-form-item>
                    </el-col>

                    <!--                    <el-col :span="12">-->
                    <!--                        <el-form-item label="交通接入服务器" prop="traffic_server">-->
                    <!--                            <el-input v-model="currentCrossing.traffic_server" />-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                    <el-col :span="24">
                        <el-form-item label="路口示意图地址" prop="photoUrl">
                            <!--                            <el-upload-->
                            <!--                                class="avatar-uploader"-->
                            <!--                                action=""-->
                            <!--                                :limit="1"-->
                            <!--                                :show-file-list="false"-->
                            <!--                                :auto-upload="false"-->
                            <!--                                :on-change="handlePhotoUrlChange">-->
                            <!--                                <img v-if="currentCrossing.photoUrl" :src="currentCrossing.photoUrl" class="avatar">-->
                            <!--                                <i v-else class="el-icon-plus avatar-uploader-icon" />-->
                            <!--                            </el-upload>-->

                            <div class="flex">
                                <input ref="filElem" type="file" class="upload-file" style="display: none;" @change="getFile">
                                <el-input v-model="currentCrossing.photoUrl" readonly style="margin-right: 10px;" />
                                <el-button size="small" type="primary" @click="choiceImg">选择文件</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="detailVisible = false">取 消</el-button>
                <el-button size="small" :loading="isLoading" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <lane-dialog ref="lane-dialog" />
    </div>
</template>

<script>
import moment from 'moment';
import OrgTree from './OrgTree';
import RemoteDictSelect from '@/modules/components/DictSelect/RemoteDictSelect';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import LaneDialog from './Crossing/lane-dialog';

import {InquiryCrossing, InsertCrossingManage, InquiryDetailedCrossing, UpdateCrossingManage} from '@/api/resourceManageApi';

export default {
    name: 'access-manage',
    components: {
        OrgTree, RemoteDictSelect, Treeselect, LaneDialog
    },
    filters: {

    },
    props: {},
    data() {
        return {
            isLoading: false,
            tableData: [],
            detailVisible: false,
            currentCrossing: {},
            rules: {
                crossing_index: [
                    { required: true, message: '编号不能为空', trigger: 'blur' }
                ],
                crossing_name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                front_type: [
                    { required: true, message: '前端类型不能为空', trigger: 'change' }
                ],
                speed_limit: [
                    { required: true, message: '小型车限速不能为空', trigger: 'blur' }
                ],
                logo_speed_limit: [
                    { required: true, message: '大型车限速不能为空', trigger: 'blur' }
                ],
                latitude: [
                    { required: true, message: '经纬度不能为空', trigger: 'blur' }
                ],
                longitude: [
                    { required: true, message: '经纬度不能为空', trigger: 'blur' }
                ],
                inside_index: [
                    { required: true, message: '内部编号不能为空', trigger: 'blur' }
                ],
                // terminals_number: [
                //     { required: true, message: '终端数不能为空', trigger: 'blur' }
                // ],
                sequence_idx: [
                    { required: true, message: '排序索引不能为空', trigger: 'blur' }
                ],
                photoUrl: [
                    { required: true, message: '路口示意图地址不能为空', trigger: 'blur' }
                ],
                cross_type: [
                    { required: true, message: '触发类型不能为空', trigger: 'change' }
                ],
                crossing_type: [
                    { required: true, message: '卡口类型不能为空', trigger: 'change' }
                ],
                road_type: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                direction_num: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                flow_threshold: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                flow_threshold1: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                // traffic_server: [
                //     { required: true, message: '不能为空', trigger: 'blur' }
                // ],
                driveway_num: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                control_unit_id: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ]
            },
            deptList: [],
            currentNode: null
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.loadRemoteData();
    },
    methods: {
        moment,
        tableRowClassName({row, rowIndex}) {
            if (this.detailVisible && this.currentCrossing.crossing_id == row.crossing_id) {
                return 'selected-row';
            }
            return '';
        },
        openLaneDialog() {
            this.$refs['lane-dialog'].show(this.currentCrossing);
        },
        choiceImg() {
            this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
        },
        getFile(file) {
            this.currentCrossing.photoUrl = this.$refs.filElem.value;

            console.log(this.$refs.filElem.value);
            console.log(file);
        },
        handlePhotoUrlChange(file, fileList) {
            console.log(file, fileList);
        },
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                isDefaultExpanded: true,
                id: node.control_unit_id,
                label: node.name,
                children: node.children
            };
        },
        handleNodeClick(data) {
            this.currentNode = data;
            this.loadRemoteData();
        },
        loadRemoteData() {

            this.isLoading = true;
            let params = this.currentNode ?  {control_unit_id: this.currentNode.control_unit_id} : {control_unit_id: 1};
            InquiryCrossing(params).then(res => {
                this.isLoading = false;
                this.tableData = res.res.InquiryCrossing;
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleUpdate(item) {
            this.isLoading = true;
            InquiryDetailedCrossing({
                crossing_id: item.crossing_id
            }).then(res => {
                this.isLoading = false;
                this.currentCrossing = res.res.InquiryCrossing && res.res.InquiryCrossing[0];
                this.currentCrossing.crossing_id = item.crossing_id;
                this.currentCrossing.crossing_type = this.currentCrossing.crossing_type.toString();
                // this.currentCrossing.front_type = Number(this.currentCrossing.front_type);

                this.detailVisible = true;
                this.$nextTick(() => {
                    this.$refs['form'] && this.$refs['form'].clearValidate();
                });
            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleAdd() {
            this.currentCrossing = {
                control_unit_id: this.currentNode ? this.currentNode.control_unit_id : undefined,
                isNew: true,
                photoUrl: ''
            };
            this.detailVisible = true;
            this.$nextTick(() => {
                this.$refs['form'] && this.$refs['form'].clearValidate();
            });
        },
        handleSubmit() {
            if (this.clickTooFast()) return;
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.isLoading = true;

                    if (this.currentCrossing.isNew) {
                        InsertCrossingManage(this.currentCrossing).then(res => {
                            this.$message.success('添加成功');
                            this.loadRemoteData();
                            this.detailVisible = false;
                            this.isLoading = false;
                        }).catch(err => {
                            this.isLoading = false;
                            console.log(err);
                        });
                    } else {
                        UpdateCrossingManage(this.currentCrossing).then(res => {
                            this.$message.success('修改成功');
                            this.loadRemoteData();
                            this.detailVisible = false;
                            this.isLoading = false;
                        }).catch(err => {
                            this.isLoading = false;
                            console.log(err);
                        });
                    }
                }
            });
        }
    }
};
</script>

<style scoped>
/deep/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
/deep/
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    text-align: center;
}
.avatar {
    width: 108px;
    height: 108px;
    display: block;
}
.table-header {
    background-color: #f8f8f8 !important;
}
/deep/
.el-table td {
    padding: 5px 0 !important;
}
/deep/
.el-button--text {
    padding: 5px 0;
}

</style>

<style lang="scss" scoped>

.table-header {
    background-color: #f8f8f8 !important;
}
.el-table ::v-deep td {
    padding: 5px 0 !important;
}
.tree-panel {
    margin-left: var(--real-sidebar-width);
    height: calc(100% - 120px);
    position: fixed;
    z-index: 100;
    left: 0;
    width: 260px;
    padding-left: 5px;
    padding-top: 5px;
    background: #fbfbfb;
    border: 1px solid #e5e5e5;
    margin-right: 10px;
}
</style>
